<template>
	<view class="content">
		<view class="infobox">
			<view class="status">
				<text v-if="info.value.repairstatus==1">待处理</text>
				<text v-if="info.value.repairstatus==2">已派单</text>
				<text v-if="info.value.repairstatus==3">维修中</text>
				<text v-if="info.value.repairstatus==4">待验收</text>
				<text v-if="info.value.repairstatus==5">已完成</text>
				<text v-if="info.value.repairstatus==0">已取消</text>
				<text class="time">{{info.value.sumbittime}}</text>
			</view>
			<view class="list">
				<view class="title">
					报修人信息
				</view>
				<view class="item">
					<label>
						<image src="../../static/icon/name.png" class="icon"></image>
						姓名
					</label>
					<view style="width:28rpx;height: auto;">
					</view>
					<input :value="info.value.name" disabled />
					<view class="box1" @click="goChat(info.value.personId,info.value.nickname)">
						<text class="button">
							在线联系
						</text>
					</view>

				</view>
				<view class="item">
					<label>
						<image src="../../static/icon/phone.png" class="icon"></image>
						手机号
					</label>
					<input :value="info.value.phone" disabled />
				</view>
				<view class="title">
					报修信息
				</view>
				<view class="item">
					<label>
						<image src="../../static/icon/time.png" class="icon"></image>
						预约时间
					</label>
					<input :value="info.value.ordertime" disabled />


				</view>
				<view class="item">
					<label>
						<image src="../../static/icon/quyu.png" class="icon"></image>
						报修区域
					</label>
					<input :value="info.value.region" disabled />

				</view>
				<view class="item">
					<label>
						<image src="../../static/icon/location.png" class="icon"></image>
						详细地址
					</label>
					<input :value="info.value.address" disabled />
				</view>
				<view class="item">
					<label>
						<image src="../../static/icon/type.png" class="icon"></image>
						故障类型
					</label>
					<input :value="info.value.repairtype" disabled />
				</view>
				<view class="item">
					<label>
						<image src="../../static/icon/section.png" class="icon"></image>
						故障内容
					</label>
					<input :value="info.value.content" disabled />
				</view>

				<view class="photoitem">
					<view class="photo">
						<image src="../../static/icon/photo.png" class="icon"></image>
						故障照片
					</view>
					<view class="uploadBox" v-for="item in info.photos">
						<image :src="item"></image>
					</view>
				</view>





				<template v-if="info.value.repairstatus>1">
					<view class="title">
						维修人员信息
					</view>
					<view class="item">
						<label style="margin-right:28rpx">
							<image src="../../static/icon/gongren.png" class="icon"></image>
							维修人
						</label>
						<input :value="info.value.maintainername" disabled />
						<view class="box1" @click="goChat(info.value.maintainerId,info.value.maintainername)">
							<text class="button">
								在线联系
							</text>
						</view>
					</view>
				</template>






				<template v-if="info.value.repairstatus==1">
					<view class="title">
						指派维修人员
					</view>
					<view class="item">
						<label>
							<image src="../../static/icon/gongren.png" class="icon"></image>
							指派技工
						</label>

						<view style="flex: 1;font-size: 28rpx;color: #666666; overflow: hidden;">
							<uni-data-picker :localdata="typelist.array" popup-title="请选择技工" @change="typechange"
								@nodeclick="onnodeclick">
							</uni-data-picker>
						</view>
					</view>
				</template>
				<template v-if="info.value.repairstatus>3">
					<view class="title">
						维修结果信息
					</view>

					<view class="item">
						<label>
							<image src="../../static/icon/name.png" class="icon"></image>
							上报人<input style="padding-left: 30rpx;" :value="info.value.maintainername" disabled />
						</label>
					</view>
					<view class="item" style="border-bottom: none;display: block;">
						<label>
							<image src="../../static/icon/yijian.png" class="icon"></image>
							备注
						</label>
						<view class="textbox">
							<textarea v-model="info.value.result" disabled />
						</view>
					</view>
					<view class="uploadBox" style="margin-top: 20rpx;">
						<u-upload class="upload" :fileList="fileList1" @afterRead="afterRead" @delete="deletePic"
							name="1" multiple :maxCount="10"></u-upload>
					</view>
				</template>




				<template v-if="info.value.repairstatus==4||info.value.repairstatus==5">
					<view class="title">
						验收信息
					</view>
					<!-- <view class="item">
					<label>
						<image src="../../static/icon/name.png" class="icon"></image>
						验收人
					</label>
				</view> -->
					<view class="item" style="border-bottom: none;display: block;">
						<label>
							<image src="../../static/icon/name.png" class="icon"></image>
							验收人<input style="padding-left: 30rpx;" :value="info.value.acceptance" disabled />
						</label>
						<label>
							<image src="../../static/icon/yijian.png" class="icon"></image>
							验收意见
						</label>
						
						<view class="textbox">
							<textarea v-model="info.value.acceptanceidea"  />
						</view>
					</view>
				</template>




			</view>
		</view>

		<view @click="zhipai" class="box" style="background-color: #3B8AF4;" v-if="info.value.repairstatus==1">
			确认指派
		</view>
		<view @click="yanshou(5)" class="box" style="background-color: #56dba4;" v-if="info.value.repairstatus==4">
			验收通过
		</view>
		<view @click="yanshou(2)" class="box" style="background-color: #F05C3E;" v-if="info.value.repairstatus==4">
			验收打回
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import api from '@/api/api'

	// 报修单信息
	let info = reactive({})
	onLoad((options) => {
		api.getRepairInfo({
			repairId: options.repairId,
		}).then(res => {
			info.value = res.data[0]
		})

		api.getNowPersonList({}).then(res => {
			typelist.array = [...res.data]
		})
	})

	// 指派
	const zhipai = () => {
		api.personAssign({
			repairId: info.value.repairId,
			maintainerId: maintainerId.value,
			maintainername: maintainername.value
		}).then(res => {
			if (res.status == 200) {
				uni.showToast({
					title: res.msg,
					icon: 'none',
					duration: 1500
				})
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					})
				}, 1500)
			}
		})
	}
    // 验收操作
    const yanshou=(repairstatus)=>{
		api.repairAcceptance({
			repairId: info.value.repairId,
			repairstatus,
			acceptanceId:uni.getStorageSync('info').personId,
			acceptance:uni.getStorageSync('info').nickname,
			acceptanceidea:info.value.acceptanceidea,
			
		}).then(res=>{
			let title='验收已通过'
			if(repairstatus==2) {title='验收已打回'}
			if(res.status==200){
				uni.showToast({
					title,
					icon:'none',
					duration:1500
				})
				setTimeout(()=>{
					uni.navigateBack({
						delta:1
					})
				},1500)
				
			}
			
		})
		
	}
	
	let selectshow = ref(false)
	const selectShow = () => {
		selectshow.value = true
	}
	const selectCancel = () => {
		selectshow.value = false
	}


	// 技工选择
	// 技工列表
	let typelist = reactive({
		array: []
	})
	let maintainerId = ref(''),
		maintainername = ref('')
	const typechange = (e) => {
		console.log(e)
		let array = e.detail.value
		maintainerId.value = array[1].value
		maintainername.value = array[1].text
	}


	const goChat = (toId, toName) => {
		uni.navigateTo({
			url: '/pages/news/chat?toName=' + toName + '&toId=' + toId
		})
	}
</script>

<style lang="scss">
	.content {
		.infobox {
			margin: 30rpx;

			.status {
				background-color: #F05C3E;
				color: white;
				padding: 20rpx 30rpx;
				border-top-left-radius: 16rpx;
				border-top-right-radius: 16rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.time {
					font-size: 24rpx;
				}
			}
		}

		.list {
			box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(131, 130, 130, 0.28);
			margin-bottom: 30rpx;
			background-color: white;
			padding: 0 30rpx 30rpx 30rpx;
			border-bottom-left-radius: 16rpx;
			border-bottom-right-radius: 16rpx;

			.title {
				font-size: 32rpx;
				font-weight: bold;
				padding-top: 20rpx;
			}

			.item {
				label {
					padding-right: 30rpx;
					font-size: 28rpx;
					color: #666666;
					display: flex;
					align-items: center;

					.icon {
						width: 40rpx;
						height: 40rpx;
						padding-right: 5rpx;
					}
				}

				.box1 {
					.button {
						font-size: 28rpx;
						color: #3B8AF4;
						border: #3B8AF4 1rpx solid;
						padding: 5rpx 10rpx;
						border-radius: 16rpx;
					}
				}

				input {
					flex: 1;
					font-size: 28rpx;
					color: #666666;
				}

				.uploadBox {

					image {
						width: 100rpx;
						height: 100rpx;
					}
				}

				line-height: 100rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				border-bottom: #E6E6E6 1rpx solid;

				.textbox {
					display: block;
					border: #E6E6E6 1rpx solid;
					padding: 20rpx;
					border-radius: 16rpx;
				}
			}

			.photoitem {
				.photo {
					line-height: 100rpx;
					padding-right: 30rpx;
					font-size: 28rpx;
					color: #666666;
					display: flex;
					align-items: center;

					.icon {
						width: 40rpx;
						height: 40rpx;
						padding-right: 5rpx;
					}
				}

			}

		}

		.box {
			margin: 10rpx 30rpx;
			color: white;
			font-size: 28rpx;
			padding: 20rpx 0;
			text-align: center;
			border-radius: 16rpx;
			box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(131, 130, 130, 0.28);
		}
	}
</style>
